<template>
  <div class="echarts_box">
    <div class="echarts_box" ref="echarts_box" :style="{ opacity: data.length == 0 ? '0' : '1' }"></div>
    <!---------------------- 无数据时显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
    import fontSize from "@/utils/fontSize";
  // const elementResizeDetectorMaker = require("element-resize-detector");
  export default {
    computed: {
      // ...mapGetters(["echartsColor"]),
    },
    watch: {
      itemStyleColor: "drawLine", // 数值变化是更新图表
      data: "drawLine", // 数值变化是更新图表
      color: "drawLine", // 数值变化是更新图表
      label: "drawLine", // 数值变化是更新图表
      barWidth: "drawLine", // 数值变化是更新图表
      unit: "drawLine", // 数值变化是更新图表
      titleSize: "drawLine", // 数值变化是更新图表
    },
    props: {
      color: {
        // 传入的颜色
        type: Array | Object,
        default: function () {
          return [];
        },
      },
      unit: {
        // 标题
        type: String,
        default: "",
      },
      itemStyleColor: {
        type: String,
        default: "#FFC344",
      },
      label: {
        // 标题
        type: String,
        default: "",
      },
      titleSize: {
        // 圆环宽度
        type: [Number, String],
        default:18
      },
      barWidth: {
        // 圆环宽度
        type: [Number, String],
        default: 12
      },
      data: {
        // 返回的数据
        type: [Number, String],
        default: 40
      },
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        try {
          var cw = document.body.clientWidth;
          this.$nextTick(() => {
            let myChart = this.$echarts.init(this.$refs.echarts_box);
            let option = {
              title: {
                text:this.label,
                left: 'center',
                top: 'center',
                itemGap: 0,
                textStyle: {
                  color: "#ffffff",
                  fontSize: fontSize.fontSize(this.titleSize),
                  // fontFamily: "PingFang SC",
                },
              },
              tooltip: {
                trigger: "item",
                // trigger: "axis",
                backgroundColor: "rgba(0,74,174,0.9)", //设置背景颜色
                textStyle: {
                  color: "rgba(255,255,255,1)", //设置文字颜色
                  // fontFamily: "PingFang SC",
                  fontSize: fontSize.fontSize(22),
                },
                formatter: "{c}"+this.unit,
                // formatter: "{b} : {c} ({d}%)",
              },
              angleAxis: {
                max: 100,
                // 隐藏刻度线
                show: false,
                startAngle: 90
              },
              radiusAxis: {
                type: 'category',
                show: true,
                axisLabel: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false
                },
              },
              polar: {
                radius: '160%' //图形大小
              },
              series: [{
                type: 'bar',
                data: [this.data],
                showBackground: true,
                // center: ['50%', '50%'],
                //   radius: ['67%', '80%'],
                roundCap: false,
                backgroundStyle: {
                  color: 'rgba(80, 135, 236, 0.6)',
                },
                coordinateSystem: 'polar',
                barWidth: fontSize.fontSize(this.barWidth),
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: this.itemStyleColor
                      }, {
                        offset: 1, color: this.itemStyleColor
                      }],
                      global: false
                    }
                  }
                },
              }]
            }
            myChart.setOption(option);
            /* 大小自适应 */
            window.addEventListener("resize", () => {
              // h = this.$refs.echarts_box.offsetHeight;
              // console.log(h);
              myChart.resize();
            });
            myChart.resize();
          });
        } catch (e) {
          console.log(e);
          // 错误处理代码片段
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .echarts_box {
    width: 100%;
    height: 100%;
    position: relative;

    .Nodata {
      position: absolute;
      top: 0;
      z-index: 10;
    }
  }
</style>